<template>
    <div class="u-chartsBox">
        <div class="legend" :class="[type,position]" v-if="!disLegend">
            <span v-for="(item,index) in legend" :key="index">
                <i :style="'background:'+ item.color +';'"></i>{{item.name}}
            </span>
        </div>
        <div class="chartsM" :id="'chartsBox_scatter'+keyId"></div>
    </div>
</template>
<script>
import "@/utils/util"
export default {
    name:'UScatterEchart',
    props:{
        keyId:{},               //唯一echart
        disLegend: Boolean,     //不显示标签
        type:{                  //标签的图标类型 pie圆点   
            type: String,
            default: "pie"
        },
        position:{              //标签的位置  默认右上
            type: String,
            default: "right"
        },
        xAxisName:{},
        yMin:{
            type: Number,
            default: 0
        },
        yMax:{
            type: Number,
            default: 5
        },
        xMin:{
            type: Number,
            default: 0
        },
        xMax:{
            type: Number,
            default: 5
        },
        yAxisName:{},
        markVal:{},
        legend: Array,
        list: Array,     
        hasDiff: Boolean,   
        grid:{
            type: Object,
            default: function(){
                return {
                        top:0,
                        left:0,
                        right:0,
                        bottom:0
                    }
            }
        }            
    },
    data(){
        return{
            chartsObj: null,
            option:{}
        }
    },
    mounted(){
        this.initChart()
        
    },
    methods:{
        initChart(){
            this.chartsObj = this.$echarts.init(document.getElementById('chartsBox_scatter'+this.keyId));
            let len = this.list[0].value.length
            let dataAxis = []                   //横坐标
            let dataInfo = {} ;
            let seriesData = []

            dataAxis = this.list.map(item => {
                return {name: item.name, max: item.radarMax}
            })
            if(this.hasDiff){
                let normal = this.legend.filter(itemled =>{ return !itemled.key})[0]
                this.list.forEach((item, index) => {
                    item.itemcolor = normal?normal.color:''
                    item.color = normal?normal.color:''
                    let spec = this.legend.filter(itemled =>{ return item.key&&item.key==itemled.key})[0]
                    if(spec){
                        let {color,isSign} = spec
                        item.itemcolor = color
                        item.color = isSign?color:'#747e93'
                    }
                })
            }

            for(let i=0; i<len; i++){
                dataInfo[i] = {}
                dataInfo[i] = this.list.map(item => {
                    return item.value[i]
                })
                dataInfo[i].forEach((item,index) => {
                    seriesData.push({
                        value: item,
                        itemStyle: {
                            shadowColor: this.list[index].itemcolor.colorRGBA(.6),
                            color:this.list[index].itemcolor
                        },
                        name: this.list[index].name
                    })
                });
            }
            // let reslist = Object.values(dataInfo); // list 转换成功的数据     

            let {left,right,top,bottom} = this.grid

            this.option = {
                grid:{
                    left: left?left:40,
                    right: right?right:(this.xAxisName?70:0),
                    top: top?top:60,
                    bottom:bottom?bottom:60,
                },
                xAxis: {
                    name: this.xAxisName,
                    max: this.xMax,
                    min: this.xMin,
                    axisTick: {
                        lineStyle:{
                            color:'#010101',
                            opacity:'.2'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#F9F9FD'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                },
                yAxis: {
                    name: this.yAxisName,
                    nameGap: 30,
                    splitLine: {
                        lineStyle: {
                            color: '#F9F9FD'
                        }
                    },
                    min: this.yMin,
                    max: this.yMax,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle:{
                            color: 'rgba(57,100,247,0.1)',
                        },
                        z:1
                    },
                    formatter: (params)=>{ 
                        return params.name+'<br><span class="tooltip_span">'+params.value[1]+'</span>分'
                    },
                    backgroundColor: "#ffffff",
                    padding: 16,
                    textStyle:{
                        color:"#333333",
                        lineHeight: 30
                    },
                    extraCssText: 'box-shadow: 0 1px 10px rgba(59, 100, 168, 0.2); width: 160px; min-height:90px;'
                },
                textStyle:{
                    color: '#747e93',
                    fontSize: 16,
                },
                series: [{
                    type: 'scatter',
                    symbolSize: 14,
                    itemStyle:{
                        shadowBlur: 10,
                        shadowOffsetY: 4,
                    },
                    data: seriesData,
                    label:{
                        show: true,
                        position: "bottom",
                        color:"#191919",
                        offset:[0,5],
                        formatter:'{b}'
                    }
                }]
            };
            if(this.markVal) {
                let {x,y} = this.markVal
                let markData = []
                if(x) markData.push({xAxis: x})
                if(y) markData.push({yAxis: y})
                if(!x&&!y) markData.push({yAxis: this.markVal})
                this.option.series[0].markLine = {
                    silent: true,
                    data: markData,
                    symbol:"none",
                    label:{
                        show: false,
                    },
                    lineStyle:{
                        color: "rgba(219,222,229,0.8)",
                        width: 2,
                    },
                }
            }

            
            // 使用刚指定的配置项和数据显示图表。
            this.chartsObj.setOption(this.option);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
        setChart(chartData){
            chartData = chartData || {}
            this.chartsObj.hideLoading()
            this.chartsObj.setOption(chartData);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
    }
}
</script>